<template>
  <div class="app-container">

    <div class="search-head">
      <template>
        <el-select  clearable style="width: 300px;" v-model="value" placeholder="项目名称">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </template>

      <template>
        <el-select  clearable style="width: 200px;" v-model="value1" placeholder="点位类别">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </template>

      <template>
        <el-select  clearable v-model="value2" style="width: 200px;" placeholder="评测点位">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </template>

      <template>
        <el-select  clearable v-model="value3" style="width: 200px;" placeholder="行政区域">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </template>

      <template>
        <el-select  clearable v-model="value4" style="width: 200px;" placeholder="任务人">
          <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </template>

      <template>
        <el-select  clearable v-model="value5" style="width: 200px;" placeholder="办结情况">
          <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </template>

      <div class="block">
        <span class="demonstration"></span>
        <el-date-picker  clearable value-format='yyyy-MM-dd'  format="yyyy-MM-dd" v-model="value6" type="datetime" placeholder="开始时间" >
        </el-date-picker>

      </div>
      <el-button @click="search_key" type="primary" icon="el-icon-search">
        搜索</el-button>
    </div>





    <el-table :data="list"  border fit highlight-current-row
     v-loading="listLoading"
    >

      <el-table-column align="center" label="序号" width="107">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="测评项目" width="103">
        <template slot-scope="scope">
          {{ scope.row.assessment.theme }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="行政区域" width="103">
        <template slot-scope="scope">
          {{ scope.row.location.name }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="点位类别" width="103"> <template slot-scope="scope">
          {{ scope.row.assessment_site.type }} </template>
      </el-table-column>

      <el-table-column align="center" label="评测点" width="103"> <template slot-scope="scope">
          {{ scope.row.assessment_site.title }} </template> </el-table-column>

      <el-table-column align="center" label="具体地址" width="103"> <template slot-scope="scope">
          {{ scope.row.assessment_site.address }} </template>
      </el-table-column>

      <el-table-column align="center" label="任务人" width="103"> <template slot-scope="scope">
          {{ scope.row.evaluation_user.nickname }}
        </template> </el-table-column>

      <el-table-column align="center" label="开始时间" width="103"> <template slot-scope="scope">
          {{ scope.row.assessment.start_time  }}
        </template> </el-table-column>

      <el-table-column align="center" label="结束时间" width="103">
        <template slot-scope="scope">
          {{ scope.row.assessment.end_time }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="办结情况" width="103">
        <template slot-scope="scope"> {{ scope.row.state }}进行中 </template>
      </el-table-column>



      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template
          slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            信息修改 </el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            查看办理 </el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)"> 办结
          </el-button>
        </template> </el-table-column>
      <!--     v-loading="listLoading"
     element-loading-text="Loading" -->

      <!-- <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.pageviews }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column> -->
    </el-table>



    <div class="pagination">
      <div class="block">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
          layout="total, sizes, prev, pager, next, jumper" :total=total>
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    feachlist
  } from '@/api/task'
  import store from '@/store'
  export default {
    // filters: {
    //   statusFilter(status) {
    //     const statusMap = {
    //       published: 'success',
    //       draft: 'gray',
    //       deleted: 'danger'
    //     }
    //     return statusMap[status]
    //   }
    // },
    data() {
      return {
        list: [],
        options: [],
        options1: [],
        options2: [],
        options3: [],
        options4: [],
        options5: [{
          label: '进行中',
          value:1
        }],
        value: '',
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
        value6: '',
        total: 1,
        listLoading: true,
        currentPage:1
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {//store.getters.token,
        feachlist(this.currentPage,this.value,this.value1,this.value2,this.value3,this.value4,1,this.value6).then(response => {
          console.log(response);


          if(this.list.length<1 || this.options.length<1){

            this.options = response.data.assessment
            this.options1 = response.data.inspect_site
            this.options2 = response.data.location_site
            this.options3 = response.data.locations
            this.options4 = response.data.user
          }

          this.list = response.data.tasks
          this.total = parseInt(response.data.total)
          this.listLoading = false
        })

      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
          this.currentPage = val
          console.log(this.currentPage)
          this.listLoading = true
          this.$scrollTo()
          this.fetchData()
      },
      search_key(){
         this.fetchData()
         console.log(this.value6)
      }
    }
  }
</script>

<style>
  .search-head {
    display: flex;
    flex-wrap: wrap;
  }

  .pagination {
    height: 96px;
    display: flex;
    align-items: center;
  }
</style>
